<template>
  <div class="">
    <!-- <h4>合并行</h4> -->
    <el-table :data="tableData" :span-method="spanMethod1" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <!-- <h4>合并列</h4> -->
    <el-table :data="tableData2" :span-method="spanMethod2" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { colMethod, getMergeCells } from '@/utils/tableMerge.js'
export default {
  name: 'MyTableMerge',
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      tableData2: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      mergeArr: [],
    }
  },
  computed: {
    // 获取所有单元格合并数据
    spanArr() {
      const mergeCols = ['name'] // 需要合并的列（字段）
      return getMergeCells(
        this.tableData,
        [{ prop: 'date', label: '日期' },{ prop: 'name', label: '姓名' },{ prop: 'address', label: '地址' }],
        mergeCols
      )
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.mergeArr = colMethod(['name'], this.tableData)
    })
  },
  methods: {
    // 合并行
    spanMethod1({ row, column, rowIndex, columnIndex }) {
      let arr = this.mergeArr[column.property] || []
      if (column.type == 'index' && this.mergeArr['name'])
        return this.mergeArr['name'][rowIndex]
      else if (arr.length) return arr[rowIndex]
      else [1, 1]
    },
    // spanArr() {
    //   const mergeCols = ['name'] // 需要合并的列（字段）
    //   return getMergeCells(this.tableData2, [], mergeCols)
    // },
    // 合并列
    spanMethod2({ row, column, rowIndex, columnIndex }) {
      console.log(123, rowIndex, columnIndex, this.spanArr)
      return this.spanArr[rowIndex][columnIndex]
    },
  },
}
</script>

<style scoped lang="scss">
</style>
